<template>
  <el-dialog
    title="试题预览"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="800px"
  >
    <div v-if="dialogVisible" class="tast-preview">
      <el-descriptions border :column="1">
        <el-descriptions-item label="试卷名称">
          <p style="width: 650px">{{ row.name }}</p>
        </el-descriptions-item>
        <el-descriptions-item label="试卷状态">
          <el-tag size="small" v-if="row.status == 1">正常</el-tag>
          <el-tag size="small" v-if="row.status == 2" type="danger"
            >禁用</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item label="试卷总分">
          {{ toFixeds(row.totalScore) }} 分
        </el-descriptions-item>
        <el-descriptions-item label="管理权限">
          <span v-if="row.permission == 1" class="color-primary">完全私有</span>
          <span v-if="row.permission == 2" class="color-success">只读共享</span>
        </el-descriptions-item>
        <el-descriptions-item label="章节设置">
          <div class="chapter-wrap">
            <div
              class="chapter-item"
              v-for="v in row.testPaperChapterList"
              :key="v.id"
            >
              <h2 class="chapter-title sheng">章节名称：{{ v.title }}</h2>
              <p class="chapter-des sheng">
                章节描述： 共{{ v.testSubjectVO.length }}题 {{ v.des }}
              </p>
              <ul class="question-wrap" v-if="row.paperType == 1">
                <li v-for="item in v.testSubjectVO" :key="item.id">
                  <el-row>
                    <el-col :span="3">
                      <span>{{ toFixeds(item.score) }} 分</span>
                    </el-col>
                    <el-col :span="20">
                      <p
                        class="question-title sheng"
                        v-html="item.testSubjects.title"
                      ></p>
                    </el-col>
                    <el-col :span="1">
                      <span
                        class="question-icon el-icon-view"
                        @click="handleLookQuestion(item)"
                      ></span>
                    </el-col>
                  </el-row>
                </li>
              </ul>
              <div class="question-wrap" v-else>
                <div class="question-bank">
                  <b>题库：</b>
                  <span>{{
                    questionBankTitle(v.testSubjectVO[0].ruleVo)
                  }}</span>
                </div>
                <div class="question-bank-info">
                  <el-row>
                    <el-col :span="6">
                      <b>题型：</b>
                      <span>
                        {{ typeFilter(v.testSubjectVO[0].ruleVo.subjectType) }}
                      </span>
                    </el-col>
                    <el-col :span="6">
                      <b>难度：</b>
                      <span>
                        {{
                          difficultyFilter(
                            v.testSubjectVO[0].ruleVo.subjectDifficulty,
                          )
                        }}
                      </span>
                    </el-col>
                    <el-col :span="6">
                      <b>题目数量：</b>
                      <span>
                        {{ v.testSubjectVO[0].ruleVo.subjectNum }} 题
                      </span>
                    </el-col>
                    <el-col :span="6">
                      <b>单题分值：</b>
                      <span
                        >{{
                          toFixeds(v.testSubjectVO[0].ruleVo.score)
                        }}
                        分</span
                      >
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { qusetionType, qusetionDifficulty } from '../public/data'
export default {
  data() {
    return {
      qusetionType,
      qusetionDifficulty,
      dialogVisible: false,
      row: {},
    }
  },
  computed: {
    questionBankTitle() {
      return function (row) {
        if (!row.testQuestionBankList) return
        return row.testQuestionBankList.map((v) => v.name).join(',')
      }
    },
  },
  mounted() {
    this.$bus.$on('showDialogTastPreview', (row) => {
      this.row = row
      this.dialogVisible = true
    })
  },
  beforeDestroy() {
    this.$bus.$off('showDialogTastPreview')
  },
  methods: {
    //查看试题
    handleLookQuestion(row) {
      this.$bus.$emit('showDialogQuestionPreview', row)
    },
    typeFilter(type) {
      return this.qusetionType.filter((v) => v.value == type)[0].label
    },
    difficultyFilter(type) {
      return this.qusetionDifficulty.filter((v) => v.value == type)[0].label
    },
  },
}
</script>
<style scoped lang="scss">
.tast-preview {
  max-height: 600px;
  overflow: auto;
}
.chapter-wrap {
  //   border-bottom: 0 none;
  .chapter-item {
    border: 1px solid #eee;
    margin-bottom: 10px;
    .chapter-title {
      width: 639px;
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      padding: 0 10px;
      background: #eee;
    }
    .chapter-des {
      width: 639px;
      height: 36px;
      line-height: 36px;
      padding: 0 10px;
      background: #f5f5f5;
    }
    .question-wrap {
      padding: 10px;
      li {
        border-radius: 5px;
        border: 1px solid #eee;
        margin-bottom: 10px;
        height: 32px;
        line-height: 32px;
        padding: 0 10px;
        box-sizing: border-box;
        .question-title {
          width: 500px;
        }
        .question-icon {
          //   margin-left: 20px;
          font-size: 16px;
          color: #666;
          cursor: pointer;
          &:hover {
            color: var(--colorH1);
          }
        }
      }
      .question-bank {
        margin-bottom: 10px;
      }
    }
  }
}
</style>